<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>aboutUs</title>
		<script type="text/javascript" src="d3.v2.min.js"></script>
		<script type="text/javascript">
			window.onload = function()
			 {
			  //Create the SVG graph.
			  var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");
			   
			  //Add data to the graph and call enter.
			  var dataEnter = svg.selectAll(".bar").data([200, 200, 200, 200]).enter();
			   
			  //The height of the graph (without text).
			  var graphHeight = 450;
			   
			  //The width of each bar.
			  var barWidth = 5;
			   
			  //The distance between each bar.
			  var barSeparation = 10;
			   
			  //The maximum value of the data.
			  var maxData = 50;
			   
			  //The actual horizontal distance from drawing one bar rectangle to drawing the next.
			  var horizontalBarDistance = barWidth + barSeparation;
			   
			  //The horizontal and vertical offsets of the text that displays each bar's value.
			  var textXOffset = horizontalBarDistance / 2 - 12;
			  var textYOffset = 20;
			   
			  //The value to multiply each bar's value by to get its height.
			  var barHeightMultiplier = graphHeight / maxData;
			   
			  //The actual Y position of every piece of text.
			  var textYPosition = graphHeight + textYOffset;
			   
			  //Draw the bars.
			  dataEnter.append("rect").attr("class","bar")
				  .attr("x", function(d, i)
				  {
				   return i * horizontalBarDistance + 450;
				  }).attr("y", function(d)
				  {
				   return graphHeight - d * barHeightMultiplier;
				  }).attr("width", function(d)
				  {
				   return barWidth;
				  }).attr("height", 1000).transition()
				  		.duration(3000)
				  		.attr("height",function(d){
				  			return d * barHeightMultiplier;
				  		});
			   
			   
			  dataEnter = svg.selectAll("rect").data([200, 200, 200, 200]).enter();
			   
			  dataEnter.append("rect").attr("x", function(d, i)
			  {
			   return i * horizontalBarDistance + 450;
			  }).attr("y", function(d)
			  {
			   return graphHeight - d * barHeightMultiplier;
			  }).attr("width", function(d)
			  {
			   return barWidth;
			  }).attr("height", 1000)
			  .transition()
			  		.delay(function(d,i) {
			  			i++;
			  			return i * 2000;
			  		})
			  		.attr("height",function(d){
			  			return d * barHeightMultiplier;
			  		});
			  		
			  // dataEnter = svg.selectAll("branch").data([1,2,3,4]).enter();
// 			  
			  // dataEnter.append("rect")
			  // //Draw the text.
			  // dataEnter.append("text").text(function(d)
			  // {
			   // return d;
			  // }).attr("x", function(d, i)
			  // {
			   // return i * horizontalBarDistance + textXOffset;
			  // }).attr("y", textYPosition);
		 }
			 
		</script>
	</head>
	<body>
		<div id="chart"> </div>
	</body>
</html>

